<template>
	<view class="page-root">
		<view class="page-box">
			<view class="flex-1 over-scroll">
				<view class="line-no padding">
					<image class="image-head" :src="avator"></image>

					<view class="bigEmpty marginLeft ">
						<view class="author">{{author}}</view>
						<view class="marginTop  marginBottom">
							<textarea v-model="content" auto-height placeholder-class="content-place"
								class="content-textarea" maxlength="1000" placeholder="分享你的AI调教经验和趣事"></textarea>
						</view>
						<view class="img-list">
							<block v-for="(item, index) in imageList" :key="index">
								<view class="img-item">
									<view class="item-box-root">
										<view class="item-box">
											<image mode="aspectFill" :src="item"></image>
											<text @click="deletePic(index)" class="item-del">x</text>
										</view>
									</view>
								</view>
							</block>
							<view v-if="imageList.length < 9" @click="click(1)" class="img-item bg-gray-circle-rect">
								<view class="item-box-root">
									<view class="item-box">
										<text>+</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="pbsafe bg-w">
				<view class="page-footer-box">
					<view class=" text-gray-14 padding  ">
						<view class="line " v-show="false">
							<view class="bigEmpty"> 创作信息公开范围 </view>
							<view @click="click(2)"> {{visLabel}}
								<image v-show="showDialog" class="icon-small " src="/static/up-arrow.png"></image>
								<image v-show="!showDialog" class="icon-small " src="/static/down-arrow.png"></image>
							</view>
						</view>

						<button class="publish-btn" @click="submit">发帖</button>
					</view>
				</view>
			</view>
		</view>


		<!-- <view class="bottom-fix width100 bgWhite">

			<view class="lineGray"></view>

			<view class="padding">
				<view class=" text-gray-14 padding  ">
					<view class="line " v-show="false">
						<view class="bigEmpty"> 创作信息公开范围 </view>
						<view @click="click(2)"> {{visLabel}}
							<image v-show="showDialog" class="icon-small " src="/static/up-arrow.png"></image>
							<image v-show="!showDialog" class="icon-small " src="/static/down-arrow.png"></image>
						</view>
					</view>

					<view class="btnBlue line padding" @click="submit()">
						立即发布
					</view>
				</view>
			</view>
		</view> -->

	</view>
</template>

<script>
	import request from "/common/request.js"
	export default {
		data() {
			return {
				avator: "",
				type: 0,
				id: 0,
				x: "x",
				originFun: false,
				imageList: [

				],
				imageList1: [

				],
				visList: ["", "所有人可见", "仅关注可见", "仅一键同款可见", "仅一键同款+3积分可见", "仅一键同款+5积分可见"],
				sizeTab1Index: 1,
				sizeTab2Index: 1,
				styleIndex: 1,
				moduleIndex: 1,
				name: "帖子",
				status: 1,
				label: "",
				visible: 1,
				goodContent: "",
				visLabel: "所有人可见",
				content: "",
				createTime: "",
				author: "",
				module: "",
				size: "",
				style: "",
				returnData: null,
				plateUserId: "",
				showDialog: false,
				selectImage: ""
			}
		},
		onShareAppMessage(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},


		onHide: function() {
			console.log("onhide")
		},
		onUnload: function() {
			console.log("onUnload")
			uni.$off('add')
		},
		onLoad: function(query) {
			this.id = query.id;
			this.oid = query.id;
			this.goodContent = query.goodContent;
			this.moduleIndex = query.moduleIndex;
			this.styleIndex = query.styleIndex;
			this.sizeTab2Index = query.sizeTab2Index;
			this.sizeTab1Index = query.sizeTab1Index;
			this.createTime = query.createTime;
			this.size = query.size;
			this.badContent = query.badContent;
			this.module = query.module;
			this.style = query.style;
			this.author = uni.getStorageSync("name");
			this.avator = uni.getStorageSync("avator");
			//this.imageList=query.imageList
			// console.log(query.image)
			// this.imageList.push(query.image)
			uni.$on('add', res => {
				this.imageList.push(res.data)
				console.log(res.data)
			})
		},
		onReady: function() {

		},
		methods: {
			deletePic(index) {
				console.log("index" + index)
				this.imageList.splice(index, 1)
			},

			vis(num) {
				this.visible = num
				this.showDialog = false
				this.visLabel = this.visList[num]
			},

			chooseTheImg() {
				uni.chooseImage({
					count: 1, //图片可选择数量
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera', '海报图库'], //album 从相册选图，camera 使用相机，默认二者都有。
					success: res => {
						let imgFiles = res.tempFilePaths //图片的本地文件路径列表
						console.log('本地地址', imgFiles)
						this.imageList.push(imgFiles[0]);
					}
				})
			},
			click(id) {
				switch (id) {
					case 1:
						//this.chooseTheImg();
						uni.navigateTo({
							url: "/pages/MyPhoto/MyPhoto?openType=2"
						})
						break
					case 2:
						this.showDialog = true
						break
				}
			},
			submit() {
				if (!this.imageList) {
					uni.showToast({
						title: "请选择图片"
					})
					return;
				}
				if (!this.name) {
					uni.showToast({
						title: "请选择填写分享内容"
					})
					return;
				}


				const that = this
				for (var i = 0; i < this.imageList.length; i++) {
					var item = that.imageList[i];
					if (item.startsWith("http")) {
						that.imageList1.push(item)
						if (that.imageList1.length == that.imageList.length)
							that.uploadMsg()
						continue
					}

					console.log("item:" + item)
					const url = getApp().globalData.apiUrl1 + "/api/v1/file/upload";
					uni.uploadFile({
						url: url,
						filePath: item,
						name: 'file',
						formData: {}, //其它上传参数
						// header: {
						// 	"token": uni.getStorageSync('Token')
						// },
						success: (res) => {
							const data = JSON.parse(res.data);
							console.log("picture:" + data.data)
							that.imageList1.push(data.data)
							console.log(that.imageList1.length)
							if (that.imageList1.length == that.imageList.length)
								that.uploadMsg()
						},
						fail: error => {
							uni.showModal({
								title: '网络中断，上传失败',
								content: "请重试",
								showCancel: false
							});
							uni.hideLoading();
						},
						complete: () => {}
					});
				}

			},
			changeOriginFun(e) {
				this.originFun = e.detail.value;
				if (his.originFun) {
					this.status = 2;
				} else {
					this.status = 1;
				}
				console.log(e.detail)
			},
			uploadMsg() {

				const that = this;
				const url = getApp().globalData.apiUrl + "/api/v1/pictureCollection "
				request(url, "POST", {
						name: this.name,
						content: this.content,
						status: that.status,
						label: this.label,
						formatImages: this.imageList1,
						type: 3,
						visible: this.visible,
						jobId: this.id,
					}, uni.getStorageSync("token"))
					.then(function(res) {
						uni.showToast({
							title: "发表成功"
						})
						uni.switchTab({
							url: "/pages/HomePage/HomePage"
						})
						console.log('返回正确回调', res)
					}, function(err) {

						console.log('返回错误回调', err)
					})

			},
		}
	}
</script>

<style>
	@import "../../common/uni.css";

	page {
		height: 100%;
	}

	.author {
		font-size: 36rpx;
		color: #000;
		font-weight: 500;
	}

	.img-list {
		height: auto;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.img-item {
		width: calc((100% - 28rpx) / 3);
		margin-bottom: 14rpx;
	}

	.img-item:nth-child(3n + 1) {
		margin-right: 14rpx;
	}

	.img-item:nth-child(3n + 2) {
		margin-right: 14rpx;
	}

	.item-box-root {
		width: 100%;
		padding-bottom: 100%;
		height: 0;
		position: relative;
	}

	.item-box {
		border-radius: 24rpx;
		overflow: hidden;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 80rpx;
		color: #666666;
		line-height: 1;
	}


	.item-box image {
		width: 100%;
		height: 100%;
		vertical-align: middle;
	}

	.item-del {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		height: 36rpx;
		width: 36rpx;
		border-radius: 8rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, .5);
		color: rgba(255, 255, 255, .8);
		font-size: 28rpx;
	}

	.content-textarea {
		width: 100%;
	}

	.content-place {
		color: #C4BFBF;
		font-size: 28rpx;
	}

	.textBg {
		border-radius: 14rpx;
		background: rgba(150, 140, 150, 0.3);
	}

	.image-item {
		width: 100%;
		border-radius: 15rpx;
	}

	.box-bottom {

		margin-top: -120rpx;
		z-index: 8;
		padding-bottom: 20rpx;
		height: 120rpx;

	}

	.footer-left {
		display: flex;
		flex-direction: column;
		align-items: center;


	}

	.footer-left image {
		width: 66rpx;
		height: 66rpx;
		vertical-align: middle;
	}

	.footer-left text {
		font-size: 24rpx;
		color: #666;
		padding-top: 8rpx;
	}

	.publish-btn {
		background-color: #7F99FF;
		border-radius: 100rpx;
		line-height: 88rpx;
		width: 100%;
		margin: 0;
		padding: 0;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}

	.publish-btn::after {
		border: none;
	}
</style>